<template>
	<view class="login-container">
		<view class="form-wrapper">
			<view style="display: flex;justify-content: center;align-items: center;">
				<img src="@/static/app_icon.png" style="width: 80rpx;height: 80rpx;" alt="" />
				<text>登录入口</text>
			</view>
			<u-form :model="form" ref="uForm" :rules="rules" label-width="120rpx">
				<u-form-item label="用户名" prop="username">
					<u-input v-model="form.username" placeholder="请输入用户名" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
			<u-button type="primary" @click="handleLogin">登录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		loginService
	} from '../../api/user';
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					]
				}
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			handleLogin() {
				console.log(1111)
				// 表单验证
				// this.$refs.uForm.validate(async (valid) => {
				// 	if (valid) {
				// 		// 验证通过，执行登录逻辑
				// 		await loginService(this.form.username, this.form.password)
				// 		uni.reLaunch({
				// 			url: '/pages/task/task'
				// 		})
				// 		console.log('登录成功', this.form);
				// 		// 这里可以调用后端接口进行登录操作
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
				this.$refs.uForm.validate().then((res) => {
					// console.log(2222)
					loginService(this.form.username, this.form.password).then(res => {
						console.log(res)
						uni.setStorageSync("user-token", res)
						uni.reLaunch({
							url: '/pages/task/task'
						})
					})
				})
			}
		}
	};
</script>

<style scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 使容器高度占满整个视口 */
		background-color: #ffffff;
		/* 可选：设置背景颜色 */
	}

	.form-wrapper {
		width: 80%;
		/* 设置表单宽度，可以根据需要调整 */
		max-width: 400px;
		/* 最大宽度，防止在大屏幕上过宽 */
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影效果 */
	}
</style>